@charset "utf-8";

@function vw($a) {
    @return ( $a / 640) * 100vw;
}

section {
    width: 100%;
    position: absolute;
    top: vw(75);
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    .title {
            ul {
                width: vw(300);
                font-size: vw(20);
                margin: 0 auto;
                li{
                    width: vw(93);
                    height: vw(36);
                    text-align: center;
                    line-height: vw(36);
                    float: left;
                    a{
                        color: #a3a3a3;
                    }
                }
                li:first-child {
                    background: #a6a6a6;
                    border: vw(1) solid #878787;
                    border-top-left-radius: vw(5);
                    border-bottom-left-radius:vw(5) ;
                    a{
                        color: #fff;
                    }
                }
                li:nth-child(2) {
                    border-bottom: vw(1) solid #d0d0d0;
                    border-top: vw(1) solid #d0d0d0;
                    border-right: vw(1) solid #878787;
                }
                li:last-child {
                    border: vw(1) solid #d0d0d0;
                    border-left: 0;
                    border-top-right-radius: vw(5);
                    border-bottom-right-radius:vw(5) ;
                }
            }
        i {
            font-size: vw(24);
            float: right;
            padding-top: vw(5);
            padding-right: vw(28);
        }
    }
    .message1 {
        width: 100%;
        margin-top: vw(30);
        padding-bottom: vw(22);
        border-bottom: vw(1) solid #e5e3de;
        .Fion-text {
            width: vw(576);
            margin: 0 auto;
            padding-top: vw(23);
            p {
                letter-spacing: vw(2);
                font-size: vw(19);
                font-family: "幼圆";
                line-height: vw(40);
                text-align: justify;
            }
        }
        .Fion-photo {
            padding-top: vw(23);
            .photo1 {
                width: vw(212);
                height: vw(212);
                float: left;
                padding-bottom: vw(2);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .photo2 {
                width: vw(212);
                height: vw(212);
                float: right;
                padding-bottom: vw(2);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .photo3 {
                width: vw(212);
                height: vw(212);
                margin: 0 auto;
                padding-bottom: vw(2);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .message2{
        width: 100%;
        margin-top: vw(30);
        padding-bottom: vw(22);
        border-bottom: vw(1) solid #e5e3de;
        .Fion-newphoto{
            padding-top: vw(34);
            .newphoto{
                width: vw(319);
                height: vw(400);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .newphoto:nth-child(n){
                float: left;
            }
            .newphoto:nth-child(2n){
                float: right;
            }
        }
    }
    .message3{
        width: 100%;
        margin-top: vw(30);
        padding-bottom: vw(22);
        border-bottom: vw(1) solid #e5e3de;
        .Fion-photo-series3{
            width: vw(380);
            height: vw(500);
            margin: 0 auto;
            padding-top: vw(30);
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .message4{
        width: 100%;
        margin-top: vw(30);
        padding-bottom: vw(22);
        border-bottom: vw(1) solid #e5e3de;
        .Fion-record{
            p{
                font-size:vw(16);
                line-height: vw(79);
                margin-left: vw(43);
                color: #666666;
                white-space: nowrap;
                
            }
            .record-img{
                width: vw(640);
                height: vw(500);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .Fion-music{
        width: 100%;
        margin-top: vw(30);
        padding-bottom: vw(22);
        border-bottom: vw(1) solid #e5e3de;
        .music{
            margin-top: vw(33);
            position: relative;
            .music-cd{
                width: vw(309);
                height: vw(309);
                margin: 0 auto;
                position: relative;
                img{
                    position: absolute;
                }
                img:first-of-type{
                    width: 100%;
                    height: 100%;
                }
                .music-play{
                    animation: linear 10s 0.2s infinite musicplay;
                }
                .music-play~img{
                    opacity: 0;
                }
                
                @keyframes musicplay{
                    from{
                        transform: rotateZ(0);
                    }
                    to{
                        transform: rotateZ(360deg);
                    }
                }
                img:nth-of-type(2){
                    z-index: 2;
                    width: vw(61);
                    height: vw(79);
                    top: vw(120);
                    left: vw(135);
                }
            }
            .music-cd1::after{
                position: absolute;
                top: vw(120);
                left: vw(130);
                content: "";
                box-sizing: border-box;
                height: vw(77);
                width: vw(61);
                border-left: vw(6) solid #FFFFFF;
                border-right: vw(6) solid #FFFFFF;
                }
            .music-open{
                width: vw(123);
                height: vw(198);
                position: absolute;
                top: vw(17);
                left: vw(390);
                img{
                    width: 100%;
                    height: 100%;
                    transform-origin: vw(100) vw(24);
                    transform: rotateZ(-30deg);
                    transition: 0.5s;
                }
                .music-open-play{
                    transform-origin: vw(100) vw(24);
                    transform: rotateZ(0);
                    transition: 0.5s;
                }
            }
            p{
                font-size: vw(20);
                line-height: vw(65);
                text-align: center;
            }
            audio{
                appearance: none;
                -moz-appearance: none;
                -webkit-appearance: none;
                width: vw(300);
                margin-left: vw(173);
            }
        }
    }
    .Fion-flash{
        width: 100%;
        margin-top: vw(30);
        padding-bottom: vw(22);
        .flash{
            padding-top:vw(17) ;
            width: vw(640);
            height: vw(360);
            position: relative;
            .flash-play{
                position: absolute;
                z-index: 2;
                top: 42%;
                left: 47%;
                width: vw(61);
                height: vw(79);
                opacity: 1;
                display: none;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            
            video{
//              position: absolute;
                width: 100%;
                height: 100%;
                background: black;
            }
        }
//      .flashh::after{
//              position: absolute;
//              top: 42%;
//              left: 47%;
//              width: vw(61);
//              height: vw(79);
//              box-sizing: border-box;
//              content: "";
//              border-left: vw(6) solid #FFFFFF;
//              border-right: vw(6) solid #FFFFFF;
//              display: none;
//          }
//      .flash:hover{
//          .flash-play{
//              display: block;
//              animation:slide-in-bottom .5s cubic-bezier(.25,.46,.45,.94) both;
//             
//@keyframes slide-in-bottom{
//  0%{
//      transform:translateY(1000px);
//  }
//  100%{
//      transform:translateY(0);
//  }
//} 
//          }
//      }
//      .flash:hover::after{
//          display: block;
//          animation:slide-in-bck-center .7s cubic-bezier(.25,.46,.45,.94) both;
//          
//@keyframes slide-in-bck-center{
//  0%{
//      transform:translateZ(600px);
//      opacity: 0;
//  }
//  100%{
//      transform:translateZ(0);
//      opacity: 1;
//  }
//}
//      }
    }
}

.Fion-img {
    width: vw(60);
    height: vw(60);
    margin: 0 auto;
    img {
        width: 100%;
        height: 100%;
    }
}

.Fion-name {
    position: relative;
    .icon-add {
        font-size: vw(25);
        float: left;
        margin-left: vw(42);
    }
    .icon-fenxiang {
        font-size: vw(25);
        float: right;
        margin-right: vw(42);
    }
    .fenxiang{
            position: absolute;
            top: vw(35);
            right: vw(0);
            height: vw(300);
            width: vw(84);
            background: #f2f2f2;
            color: #999999;
            display: none;
//          animation: fenxiang1 0.5s forwards;
//          @keyframes fenxiang1{
//              from{
//                  transform: translateX(0);
//              }
//              to{
//                  transform: translateX(vw(67));
//              }
//          }
            ul{
                width: 100%;
            }
            li{
                width: 100%;
                height: vw(100);
                text-align: center;
                box-sizing: border-box;
                padding-top: vw(20);
                .fenxiang-pic{
                    width: vw(34);
                    margin: 0 auto;
                    img{
                        width: 100%;
                    }
                }
                span{
                    font-size: vw(18);
                }
            }
        }
    .fenxiangg{
        display: block;
        z-index: 2;
        animation: fenxiang2 0.5s both;
            @keyframes fenxiang2{
                from{
                    transform: translateX(vw(67));
                    
                }
                to{
                    transform: translateX(0);
                }
            }
    }
    p {
        font-size: vw(18);
        line-height: vw(30);
        text-align: center;
        span {
            color: #ff0018;
        }
    }
}

.Fion-profession {
    width: vw(195);
    height: vw(30);
    margin: 0 auto;
    .profession {
        width: vw(55);
        height: vw(28);
        line-height: vw(28);
        font-size: vw(18);
        text-align: center;
        border: vw(1) solid #b0b0b0;
        border-radius: vw(8);
        color: #787878;
        box-sizing: border-box;
    }
    .profession:first-child {
        float: left;
    }
    .profession:nth-child(2) {
        float: right;
    }
    .profession:last-child {
        margin: 0 auto;
    }
}

.Fion-release {
    width: vw(585);
    margin: 0 auto;
    margin-top: vw(23);
    line-height: vw(65);
    .release-time {
        float: left;
        color: #999999;
        font-size: vw(16);
        p {
            float: left;
            margin-right: vw(25);
        }
        span {
            float: left;
            i {
                padding: 0 vw(8);
            }
            .iconfont{
                font-size: vw(16);
            }
        }
    }
    .release-operate {
        float: right;
        color: #999999;
        font-size: vw(16);
        li {
            float: left;
            padding: 0 vw(20);
            position: relative;
            select{
                position: absolute;
                height: vw(16);
                width: vw(25);
                top: 40%;
                vertical-align: middle;
                opacity: 0;
            }
            i{
                vertical-align: middle;
            }
            .iconfont{
                font-size: vw(16);
            }
        }
        li:last-child {
            padding-right: 0;
            i {
                padding-right: vw(4);
            }
        }
    }
}
